﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items." />
    <title id='Description'>This demo demonstrates the jqxListBox Drag and Drop capabilities.
        With the jqxListBox's Drag and Drop, you can reorder items, move items from one
        ListBox to another or just drop an item anywhere and get its data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();

                var data1 = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha"
		        ];

                var data2 = [
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee﻿",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
                // Create a jqxListBox
                $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 200, height: 250, theme: theme,
                    dragStart: function (item) {
                        if (item.label == "Breve")
                            return false;
                    },
                    renderer: function (index, label, value) {
                        if (label == "Breve") {
                            return "<span style='color: red;'>" + label + "</span>";
                        }
                        return label;
                    }
                });

                $("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, source: data2, width: 200, height: 250, theme: theme,
                    dragEnd: function (item) {
                        if (item.label == "Frappuccino")
                            return false;
                    },
                    renderer: function (index, label, value) {
                        if (label == "Frappuccino") {
                            return "<span style='color: red;'>" + label + "</span>";
                        }
                        return label;
                    }

                });

                $("#listBoxA, #listBoxB").bind('dragStart', function (event) {
                    $("#dragStartLog").text("Drag Start: " + event.args.label);
                    $("#dragEndLog").text("");
                });

                $("#listBoxA, #listBoxB").bind('dragEnd', function (event) {
                    $("#dragEndLog").text("Drag End");
                    if (event.args.label) {
                        var ev = event.args.originalEvent;
                        var x = ev.pageX;
                        var y = ev.pageY;
                        if (event.args.originalEvent.originalEvent.touches) {
                            var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                            x = touch.pageX;
                            y = touch.pageY;
                        }

                        var offset = $("#textarea").offset();
                        var width = $("#textarea").width();
                        var height = $("#textarea").height();
                        var right = parseInt(offset.left) + width;
                        var bottom = parseInt(offset.top) + height;

                        if (x >= parseInt(offset.left) && x <= right) {
                            if (y >= parseInt(offset.top) && y <= bottom) {
                                $("#textarea").val(event.args.label);
                            }
                        }
                    }
                });

            });
        </script>
        <div id='jqxWidget'>
            <div style="float: left;" id="listBoxA">
            </div>
            <div style="margin-left: 20px; float: left;" id="listBoxB">
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
            <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                <b>Events Log:</b>
                <div id="dragStartLog">
                </div>
                <div id="dragEndLog">
                </div>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Breve" is disabled.
                <br />
                Dropping of "Frappuccino" is disabled.
            </div>
        </div>
    </div>
</body>
</html>
